<template>
	<view class="">
		<view class="w100 h100">
			<view v-if="current==0 || current==1" class="w100 h100">
				<view class="card c3 mb10 cshow" v-for="(form,index) in orderList" :key="index" @click="toDtail(form)">
					<view class="bd1 dfa pb10">
						<view class="f-c-s f-1">
							<view class="c0">
								<view class="dfa">
									<text class="wei">#</text>
									<text class="f24 wei6">{{form.pick_up_code || '空'}}</text>
									<text class="ml5 f10 bs4"
										:style="{padding: '8rpx',background: '#FDDA34',color: '#000'}"
										v-if="form.appointment == 1">预</text>
									<text class="ml5 f10 bs4"
										:style="{padding: '8rpx',background: subColor,color: '#000'}"
										v-if="form.diningType == 1">打包</text>
									<text class="ml5 f10 bs4"
										:style="{padding: '8rpx',background: subColor,color: '#000'}">点单</text>
								</view>
								<view class="mt5" v-if="form.scene == 2">
									<text class="pl5 c6 f10">{{form.diningTypeFormat}}
										<text class="mlr5">/</text>{{form.created_at}}</text>
								</view>
								<view class="mt5" v-if="form.scene == 1">
									<text class="pl5 c6 f10">{{form.appointment==1 ? '预约送达' : '立即送达'}}
										<text class="mlr5">/</text>{{form.serverTime}} 前送达</text>
								</view>
							</view>
						</view>
						<view class="f-c-e wei6">
							<view>
								<text class="pr5 c0">{{form.status_name}}</text>
							</view>
							<text class="f10 p5 c9 bf8 mt5 bs4" v-if="form.refund==null">{{form.refund_name}}</text>
							<text class="f10 p5 crb bf8 mt5 bs4" v-else>{{form.refund_name}}</text>
						</view>
					</view>
					<view class="mt10 f-bt bd1 pb10">
						<view class="dfa f-g-1">
							<view class="f-e-c">
								<text class="c3">下单时间： {{form.create_date}}</text>
								<text class="c3">预计取货时间：{{form.pick_up_date}}</text>
								<text class="c3">取货时间：{{form.over_date}}</text>
								<!-- <text class="f10 c9 mt5">{{form.user.mobile}}</text>
								<view class="dfbc" v-if="form.payNum">
									<text class="f10 p5 c9 bf8 mt5 bs4" v-if="form.payNum==1">门店新客</text>
									<text class="f10 p5 c9 bf8 mt5 bs4" v-else>第{{form.payNum}}次下单</text>
								</view> -->
							</view>
						</view>
						<!-- <view class="f-g-0 mr10" @click.stop="tocenter(form.user.mobile)">
							<u-icon name="phone-fill" color="#000" size="30"></u-icon>
						</view> -->
					</view>
					<!-- <view class="mt10 f-bt bd1 pb10" v-if="form.scene == 1">
						<view class="dfa f-g-1">
							<view class="f-e-c">
								<view class="c3" v-if="form.address">
									<text class="wei c0">{{form.address.contact}}{{form.address.call}}</text>
									<text class="f10 c6 ml5">{{form.address.mobile}}</text>
								</view>
								<view class="f10 c6 mt5 flex f-y-c" @click.stop="ckwz(form.address)" v-if="form.address">
									<text>{{form.address.distance}}km</text>
									<text>
										<text v-if="form.address && form.address.address">{{form.address.address}}</text>
										<text v-if="form.address && form.address.description">{{form.address.description}}</text>
									</text>
									<u-icon size="12" color="#666" name="arrow-right" style="line-height: 26rpx;"></u-icon>
								</view>
								<view class="dfbc" v-if="form.orderIndex && form.orderIndex.storePay">
									<text class="f10 p5 c9 bf8 mt5 bs4" v-if="form.orderIndex.storePay==1">门店新客</text>
									<text class="f10 p5 c9 bf8 mt5 bs4" v-else>第{{form.orderIndex.storePay}}次下单</text>
								</view>
							</view>
						</view>
						<view class="f-g-0 mr10" @click.stop="tocenter(form.address.mobile)" v-if="form.address && form.address.mobile">
							<u-icon name="phone-fill" color="#000" size="30"></u-icon>
						</view>
					</view> -->
					<!-- <view class="flex mt10 bd1 pb10" v-if="form.scene == 1 && form.state==5">
						<view class="f-g-1" v-if="form.deliveryOrder">
							<view class="f-bt">
								<view class="wei f14">
									{{form.deliveryOrder.deliveryTypeFormat}}
									<text class="ml5 f10 bs4"
										:style="{padding: '8rpx',background: subColor,color: '#000'}">{{form.deliveryOrder.channelName}}</text>
								</view>
								<view class="f-g-0 f12" :class="form.deliveryOrder.callState==2?'cf5':'c9'">
									{{form.deliveryOrder.stateFormat}}
								</view>
							</view>
							<view class="f-bt dfa mt5" v-if="form.deliveryOrder.rider">
								<view class="f-e-c f-g-1">
									<view class="c3">
										<text
											class="wei c0">{{form.deliveryOrder.rider && form.deliveryOrder.rider.name}}</text>
										<text class="f10 c6 ml5">{{form.deliveryOrder.rider.mobile}}</text>
									</view>
								</view>
								<view class="f-g-0 f12 c9 mr10" @click.stop="tocenter(form.deliveryOrder.rider.mobile)">
									<u-icon name="phone-fill" color="#000" size="30"></u-icon>
								</view>
							</view>
						</view>
						<view class="f-g-0"></view>
					</view>
					<view class="flex bz mt10 bs4 f-y-t" v-if="form.notes">
						<view class="left f10 bs4 mr5 f-g-0">备注</view>
						<view class="f14 wei">{{ form.notes}}</view>
					</view> -->
					<view class="f-bt mt10">
						<!-- {{form.goods && form.goods.length}} -->
						<!-- {{form.goodsNum}} -->
						<view class="wei f16 c0">1种商品，共1件</view>
						<view>
							<view>
								<text>预计收入</text>
								<text class="wei f14">￥{{form.origin_amount/100}}</text>
							</view>
							<view class="f10 c9">顾客实际支付：￥{{form.origin_amount/100}}</view>
						</view>
					</view>
					<view class="f-x-e mt10 pt10 bt1" v-if="form.state>0 && form.state<=5">
						<view v-if="form.status>=20 && form.status!=101 && form.refund==null" class="f-g-0 w30 p-0-10"
							@click.stop="tuikuan(form)">
							<u-button type="primary" :customStyle="{marginLeft: '20rpx',color:'#000'}" :plain="true"
								text="退款" color="#e4e4e4" shape="circle">
							</u-button>
						</view>
						<view v-if="form.status==30" class="f-g-0 w30 p-0-10" @click.stop="$emit('op','refusal',form)">
							<u-button type="primary" :customStyle="{marginLeft: '20rpx',color:'#000'}" :plain="true"
								text="拒单" color="#e4e4e4" shape="circle">
							</u-button>
						</view>
						<view v-if="form.status==30" class="f-g-0 w30 p-0-10"
							@click.stop="$emit('op','receiving',form)">
							<u-button type="primary" :customStyle="{marginLeft: '20rpx',color:'#000'}" text="接单"
								:color="subColor" shape="circle">
							</u-button>
						</view>
						<view v-if="form.status>=40 && form.status != 101 && form.status != 52 && form.status != 51"
							class="f-g-0 w30 p-0-10" @click.stop="$emit('op','maked',form)">
							<u-button type="primary" :customStyle="{marginLeft: '20rpx',color:'#000'}" text="制作完成"
								:color="subColor" shape="circle">
							</u-button>
						</view>
						<view v-if="form.status == 51 && form.status != 101" class="f-g-0 w30 p-0-10"
							@click.stop="$emit('op','completeing',form)">
							<u-button type="primary" :customStyle="{marginLeft: '20rpx',color:'#000'}" :plain="true"
								text="确认取单" color="#e4e4e4" shape="circle">
							</u-button>
						</view>
						<!-- <view v-if="form.state>=3 && form.state<=5" class="f-g-0 w50 p-0-10"
							@click.stop="$emit('op','refundOrder',form)">
							<u-button type="primary" :customStyle="{marginLeft: '20rpx',color:'#000'}" :plain="true"
								text="退款" color="#e4e4e4" shape="circle">
							</u-button>
						</view>
						<view
							v-if="form.scene == 1 && form.state == 5 && form.deliveryOrder && form.deliveryOrder.deliveryType==2"
							class="f-g-0 w50 p-0-10" @click.stop="$emit('op','completeOrder',form)">
							<u-button type="primary" :customStyle="{marginLeft: '20rpx',color:'#000'}" text="确认送达"
								:color="subColor" shape="circle">
							</u-button>
						</view>
						<view
							v-if="(form.scene == 1 && form.state == 4) || form.deliveryOrder && form.deliveryOrder.callState == 2"
							class="f-g-0 w50 p-0-10" @click.stop="$emit('op','comDelivery',form)">
							<u-button type="primary" :customStyle="{marginLeft: '20rpx',color:'#000'}" text="发起配送"
								:color="subColor" shape="circle">
							</u-button>
						</view>
						<view v-if="form.scene != 1 && form.state == 4" class="f-g-0 w50 p-0-10"
							@click.stop="$emit('op','completeing',form)">
							<u-button type="primary" :customStyle="{marginLeft: '20rpx',color:'#000'}" :plain="true"
								text="确认取单" color="#e4e4e4" shape="circle">
							</u-button>
						</view>
						<view v-if="form.scene != 1 && form.state == 4 && form.takeScreen && form.takeScreen.id"
							class="f-g-0 w50 p-0-10" @click.stop="$emit('op','call',form)">
							<u-button type="primary" :customStyle="{marginLeft: '20rpx',color:'#000'}" text="叫号"
								:color="subColor" shape="circle">
							</u-button>
						</view>
						<view v-if="form.state==3" class="f-g-0 w50 p-0-10" @click.stop="$emit('op','maked',form)">
							<u-button type="primary" :customStyle="{marginLeft: '20rpx',color:'#000'}" text="制作完成"
								:color="subColor" shape="circle">
							</u-button>
						</view>
						<view v-if="form.state==2" class="f-g-0 w50 p-0-10" @click.stop="$emit('op','refusal',form)">
							<u-button type="primary" :customStyle="{marginLeft: '20rpx',color:'#000'}" :plain="true"
								text="拒单" color="#e4e4e4" shape="circle">
							</u-button>
						</view>
						<view v-if="form.state==2" class="f-g-0 w50 p-0-10" @click.stop="$emit('op','receiving',form)">
							<u-button type="primary" :customStyle="{marginLeft: '20rpx',color:'#000'}" text="接单"
								:color="subColor" shape="circle">
							</u-button>
						</view> -->
					</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		props: {
			orderList: {
				type: Array,
				default () {
					return []
				}
			},
			current: {
				type: Number,
				default: 0
			}
		},
		data() {
			return {
				subColor: uni.getStorageSync('subject_color'),
			}
		},
		methods: {
			toDtail(v) {
				uni.navigateTo({
					url: `/pages/order/detail?id=${v.id}`
				})
			},
			tocenter(e) {
				uni.makePhoneCall({
					phoneNumber: e
				});
			},
			ckwz(obj) {
				uni.openLocation({
					latitude: +obj.lat,
					longitude: +obj.lng,
					address: obj.address,
				})
			},
		}
	}
</script>

<style lang="scss" scoped>
	.bd1 {
		border-bottom: 3rpx dotted #e5e5e5;
	}

	.bt1 {
		border-top: 3rpx dotted #e5e5e5;
	}

	.bz {
		background: #FFFBE0;
		padding: 20rpx 10rpx;

		.left {
			padding: 4rpx 8rpx;
			color: #fff;
			background: linear-gradient(to right, #F6AD6D, #F95D40);
		}
	}
</style>